<!DOCTYPE html>
<html>
	<head>
		<link rel="shortcut icon" href="icon.gif" />
		<link href="style.css" rel="stylesheet" type="text/css" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Live Tabletop</title>
		<!-- JQuery framework for DOM manipulation and Ajax -->
		<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
		<!-- main Live Tabletop object: global LT variable -->
		<script type="text/javascript" src="js/LT.js"></script>
		<!-- classes: LT.Panel, LT.Table, LT.User, LT.Tile, etc. -->
		<script type="text/javascript" src="js/Campaign.js"></script>
		<script type="text/javascript" src="js/Grid.js"></script>
		<script type="text/javascript" src="js/Image.js"></script>
		<script type="text/javascript" src="js/Map.js"></script>
		<script type="text/javascript" src="js/Palette.js"></script>
		<script type="text/javascript" src="js/Panel.js"></script>
		<script type="text/javascript" src="js/Piece.js"></script>
		<script type="text/javascript" src="js/Tile.js"></script>
		<script type="text/javascript" src="js/User.js"></script>
		<!-- panels: LT.characterPanel, LT.userPanel, etc. -->
		<script type="text/javascript" src="js/campaignPanel.js"></script>
		<script type="text/javascript" src="js/characterPanel.js"></script>
		<script type="text/javascript" src="js/mapPanel.js"></script>
		<script type="text/javascript" src="js/userPanel.js"></script>
		<!-- utility functions -->
		<script type="text/javascript" src="js/init.js"></script>
		<script type="text/javascript" src="js/install.js"></script>
		<script type="text/javascript" src="js/login.js"></script>
		<script type="text/javascript" src="js/uploader.js"></script>
	</head>
	<body>

		<!-- installer, should be hidden when Live Tabletop is installed -->
		<form id="installBox">
			<p>
				Live Tabletop needs to be configured to complete installation.
				The database server URL, the name of the database, and the
				username and password required to access the database will vary
				from site to site. (Live Tabletop will try to create the database
				if it does not yet exist.)
				
			</p>
			<table>
				<tr><td>Database Server (URL): </td><td><input type="text" size="12" name="location"/></td></tr>
				<tr><td>Database Name: </td><td><input type="text" size="12" name="database"/></td></tr>
				<tr><td>Database Username: </td><td><input type="text" size="12" name="username"/></td></tr>
				<tr><td>Database Password: </td><td><input type="password" size="12" name="password"/></td></tr>
				<tr>
					<td colspan="2">
						<p>Choose a username and password for Live Tabletop
						administration. (This is not a user account.)</p>
					</td>
				</tr>
				<tr><td>Administrator Username: </td><td><input type="text" size="12" name="admin_username"/></td></tr>
				<tr><td>Administrator Password: </td><td><input type="password" size="12" name="admin_password"/></td></tr>
				<tr><td>Re-type Password: </td><td><input type="password" size="12" name="retype_password"/></td></tr>
			</table>
			<input type="button" value="Configure Live Tabletop"/>
		</form>

		<!-- displays the campaign's current map -->
		<div id="map">
			<div id="tileLayer"></div>
			<div id="wallLayer"></div>
			<div id="pieceLayer"></div>
			<div id="fogLayer"></div>
			<div id="clickLayers">
				<div class="clickLayer" id="clickTileLayer"></div>
				<div class="clickLayer" id="clickWallLayer"></div>
				<div class="clickLayer" id="clickPieceLayer"></div>
			</div>
		</div>

		<!-- panels -->
		<div class="panel" data-panel="user">
			<div class="title">
				<div class="resizeTL"></div>
				<div class="caption">User</div>
				<div class="resizeTR"></div>
				<div class="close"></div>
			</div>
			<div class="tabBar">
				<div class="tab" data-tab="user list">Friends</div>
				<div class="tab" data-tab="user info">My Account</div>
				<div class="tab active" data-tab="help">Help</div>
			</div>
			<div class="content" data-tab="user list">
			</div>
			<div class="content" data-tab="user info">
				<a id="logout">Logout</a>
				<a id="defaultPanels">Default Panels</a>
			</div>
			<div class="content" data-tab="help">
				<form id="userCreator">
					<!-- FIXME: placeholder not supported in IE9 and earlier -->
					<input type="text" name="username" placeholder="username"/>
					<input type="password" name="password" placeholder="password"/>
					<input type="password" name="retype_password" placeholder="re-type password"/>
					<input type="button" id="createUser" value="Create Account"/>
				</form>
			</div>
			<div class="bottom">
				<div class="resizeBL"></div>
				<div class="resizeBR"></div>
			</div>
		</div>

		<div class="panel" data-panel="campaign">
			<div class="title">
				<div class="resizeTL"></div>
				<div class="caption">Campaign</div>
				<div class="resizeTR"></div>
				<div class="close"></div>
			</div>
			<div class="tabBar">
				<div class="tab active" data-tab="campaign list">List</div>
				<div class="tab" data-tab="campaign info">Info</div>
				<div class="tab" data-tab="chat">Chat & Roll</div>
			</div>
			<div class="content" data-tab="campaign list">
				<table>
					<tbody>
						<tr><td><a>My Campaign</a> (owned)</td><td><input type="button" value="disown"/></td></tr>
						<tr><td><a>My Friend's Campaign</a></td><td></td></tr>
					</tbody>
				</table>
			</div>
			<div class="content" data-tab="campaign info">
				<span id="campaignName">My Campaign</span>
				<input type="button" value="rename"/>
				<input type="checkbox" value="private" id="private" checked="checked"/>
				<label for="private">private</label>
				<table>
					<tbody>
						<tr>
							<td><a>Myself</a></td>
							<td>
								<div><input type="checkbox" value="owner"/>owner</div>
								<div><input type="checkbox" value="viewing"/>viewing</div>
								<div><input type="button" value="remove"/><input type="button" value="ban"/></div>
							</td>
						</tr>
						<tr>
							<td><a>Someone Else</a></td>
							<td>
								<div><input type="checkbox" value="owner"/>owner</div>
								<div><input type="checkbox" value="viewing"/>viewing</div>
								<div><input type="button" value="remove"/><input type="button" value="ban"/></div>
							</td>
						</tr>
					</tbody>
				</table>
				<select name="user"><option>My Friend</option></select>
				<input type="button" value="invite to campaign"/>
				<input type="button" value="share campaign"/>
			</div>
			<div class="content" data-tab="chat">
				<div id="chatOutput"><a id="chatBottom"> </a></div>
				<form id="chatForm"><textarea id="chatInput"></textarea><input type="submit" value="Send"/></form>
			</div>
			<div class="bottom">
				<div class="resizeBL"></div>
				<div class="resizeBR"></div>
			</div>
		</div>


		<div class="panel" data-panel="map">
			<div class="title">
				<div class="resizeTL"></div>
				<div class="caption">Map</div>
				<div class="resizeTR"></div>
				<div class="close"></div>
			</div>
			<div class="tabBar">
				<div class="tab" data-tab="map list">List</div>
				<div class="tab" data-tab="map info">Info</div>
				<div class="tab active" data-tab="map tools">Tools</div>
				<div class="tab" data-tab="piece list">Pieces</div>
				<div class="tab" data-tab="piece info">Piece Info</div>
			</div>
			<div class="content" data-tab="map list">
				<table>
					<tr class="mapRow template">
						<td><a class="load">Map Name</a> <span class="info">(25 &times; 25 square)</span></td>
						<td><input type="button" value="disown" class="disown"/></td>
					</tr>
				</table>
				<form id="mapCreator">
					<!-- TODO: GUI image selector -->
					<!-- TODO: url option -->
					<!-- TODO: default tile option -->
					<div>Background: <select name="image_id"><option value="-1">None</option></select></div>
					<div>
						Tiles:
						<input name="columns" type="text" size="2" value="25"/>
						&times;
						<input name="rows" type="text" size="2" value="25"/>
						<select name="type">
							<option value="square" selected="selected">square</option>
							<option value="hex">hex</option>
						</select>
					</div>
					<div><input type="button" value="Create Map" id="createMap"/></div>
				</form>
			</div>
			<div class="content" data-tab="map info">
				<form id="mapEditor">
					<div>Name: <input name="name" type="text" placeholder="Map Name"/></div>
					<div>Background: <select name="image_id"><option value="-1">None</option></select></div>
					<div>
						Tiles:
						<input name="columns" type="text" size="2" value="25"/>
						&times;
						<input name="rows" type="text" size="2" value="25"/>
						<select name="type">
							<option value="square" selected="selected">square</option>
							<option value="hex">hex</option>
						</select>
					</div>
					<div>
						Zoom:
						<input name="min_zoom" type="text" size="3" value="25"/>%
						-
						<input name="max_zoom" type="text" size="3" value="400"/>%
					</div>
					<div>
						Rotate:
						<input name="min_zoom" type="text" size="3" value="-180"/>&deg;
						-
						<input name="max_zoom" type="text" size="3" value="180"/>&deg;
						<select name="tilt">
							<option value="[30,90]" selected="selected">free tilt</option>
							<option value="[30]">side view</option>
							<option value="[90]">top view</option>
						</select>
					</div>
					<div>
						Grid:
						<select name="grid_thickness">
							<option value="0">none</option>
							<option value="1" selected="selected">thin</option>
							<option value="2">thick</option>
						</select>
						<select name="grid_color">
							<option value="#000" selected="selected">black</option>
							<option value="#FFF">white</option>
						</select>
					</div>
					<div>
						Wall:
						<select name="wall_thickness">
							<option value="2" selected="selected">thin</option>
							<option value="4">thick</option>
						</select>
						<select name="wall_color">
							<option value="#000" selected="selected">black</option>
							<option value="#FFF">white</option>
						</select>
					</div>
					<div>
						Door:
						<select name="door_thickness">
							<option value="2" selected="selected">thin</option>
							<option value="4">thick</option>
						</select>
						<select name="door_color">
							<option value="#000">black</option>
							<option value="#FFF" selected="selected">white</option>
						</select>
					</div>
					<div>
						<input type="button" value="Apply Changes" id="applyMapChanges"/>
						<input type="button" value="Delete Map" id="deleteMap"/>
					</div>
				</form>
			</div>
			<div class="content" data-tab="map tools">
				<div>
					<div class="swatch" id="eraser">erase</div>
					<div class="swatch" id="fogTool">fog</div>
					<div class="swatch" id="wallTool">wall</div>
					<div class="swatch" id="pieceTool">piece</div>
					<div class="clearBoth"></div><!-- TODO: parent div overflow:auto instead of this div? -->
				</div>
				<div id="tileBrushes"></div>
			</div>
			<div class="content" data-tab="piece list">
				<table>
					<tr>
						<td><a><img src="images/upload/piece/rogue.png"/> rogue</a> at (1,3)</td>
						<td><input type="button" value="delete"/></td>
					</tr>
					<tr>
						<td><a><img src="images/upload/piece/priest.png"/> priest</a> at (7,4)</td>
						<td><input type="button" value="delete"/></td>
					</tr>
				</table>
				<form id="pieceCreator">
					<input name="image_id" type="hidden" value=""/>
					<input type="button" value="Create Piece" id="createPiece"/>
					<div class="clearBoth"></div>
				</form>
			</div>
			<div class="content" data-tab="piece info">
				<form id="pieceEditor">
					<div>Name: <input name="name" type="text" placeholder="Piece Name"/></div>
					<div>Character: <select name="character_id"><option value="-1">None</option></select></div>
					<div>
						Position:
						<input name="x" type="text" size="1" value="0"/>
						,
						<input name="y" type="text" size="1" value="0"/>
					</div>
					<!-- TODO: GUI for centering piece -->
					<div>
						Center:
						<input name="x_center" type="text" size="2" value="0"/>
						px,
						<input name="y_center" type="text" size="2" value="0"/>
						px
					</div>
					<div>
						Base:
						<input name="x_tiles" type="text" size="1" value="0"/>
						&times;
						<input name="y_tiles" type="text" size="1" value="0"/>
						tiles
					</div>
					<div>Scale: <input name="scale" type="text" size="3" value="100"/>%</div>
					<input name="image_id" type="hidden" value=""/>
					<div>
						<input type="button" value="Apply Changes" id="applyPieceChanges"/>
						<input type="button" value="Delete Piece" id="deletePiece"/>
					</div>
					<div class="clearBoth"></div>
				</form>
				<div id="pieceEditorImages"></div>
			</div>
			<div class="bottom">
				<div class="resizeBL"></div>
				<div class="resizeBR"></div>
			</div>
		</div>

		<div class="panel" data-panel="character">
			<div class="title">
				<div class="resizeTL"></div>
				<div class="caption">Character</div>
				<div class="resizeTR"></div>
				<div class="close"></div>
			</div>
			<div class="tabBar">
				<div class="tab active" data-tab="character list">List</div>
				<div class="tab" data-tab="character info">Info</div>
				<div class="tab" data-tab="character stats">Stats</div>
				<div class="tab" data-tab="character notes">Notes</div>
			</div>
			<div class="content" data-tab="character list">
			</div>
			<div class="content" data-tab="character info">
			</div>
			<div class="content" data-tab="character stats">
					<form id="statCreator" style="display: none;">
						<input name="name" type="text" value="Stat"/>
						<input name="value" type="text" value="Value"/>
						<div class="buttonDiv" id="addStat"><div>+</div></div>
						<div class="clearBoth"></div>
					</form>
					<div class="separator"></div>
					<input type="button" value="Apply Changes" id="submitStats"/>
			</div>
			<div class="content" data-tab="character notes">
			</div>
			<div class="bottom">
				<div class="resizeBL"></div>
				<div class="resizeBR"></div>
			</div>
		</div>


		<!-- permanent controls at the top of the page -->
		<div id="pageBar">
			<div id="logo"></div>
			<div id="panelButtons">
				<div class="panelButton" data-panel="user">User</div>
				<div class="panelButton" data-panel="campaign">Campaign</div>
				<div class="panelButton" data-panel="map">Map</div>
				<div class="panelButton" data-panel="character">Character</div>
			</div>
			<form id="loginForm">
				<input type="text" name="username" placeholder="username"/>
				<input type="text" name="password" placeholder="password"/>
				<input type="button" value="Login">
			</form>
			<div id="viewControls">
				<input type="button" value="-"/>
				<input type="button" value="+"/>
				<input type="button" value="&#8634;"/>
				<input type="button" value="&#8635;"/>
				<input type="button" value="&#8593;"/>
				<input type="button" value="&#8595;"/>
			</div>
		</div>

	</body>
</html>
